<template>
  <a-form
    ref="formRef"
    :model="formData"
    :label-col="labelCol"
    labelAlign="right"
    :wrapper-col="wrapperCol"
    v-bind="$attrs"
  >
    <slot></slot>
  </a-form>
</template>

<script setup lang="ts">
import { ref, toRaw } from 'vue'
interface formLayoutProps {
  labelCol: { [key: string]: any },
  wrapperCol: { [key: string]: any },
  formData: any,
  isValid?: boolean,
  showButton?: boolean
}
const props = withDefaults(defineProps<formLayoutProps>(), {
  labelCol: () => {
    return {
      'style': 'width: 100px'
    }
  },
  wrapperCol: () => {
    return {
      'style': 'width: 100px'
    }
  },
  formData: () => {
    return {}
  },
  isValid: true,
  showButton: true
})
const emit = defineEmits(['validateSuccess', 'validateError', 'update:formData'])

const formRef = ref()
let initFormData = toRaw(props.formData)

// 表单验证
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      emit('validateSuccess', props.formData)
    })
    .catch((error: string) => {
      console.log(error)
      emit('validateError', error)
    });
}

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
  emit('update:formData', initFormData)
}

defineExpose({
  onSubmit,
  resetForm
})
</script>

<style lang="less" scoped>
.form-footer {
  height: 53px;
  line-height: 53px;
  text-align: right;
}
</style>
